<template>
  <div class="points-balance">
    <div class="balance-header">
      <h2>积分余额</h2>
      <n-button @click="fetchPointsData" size="small" style="margin-left: 10px;" type="primary">刷新</n-button>
    </div>
    <p :style="pointStyle">当前积分：{{ pointBalance }}</p>
<!--    <n-divider />-->
    <div style="height: 3px;background-color: grey"></div>
    <h2>积分变动记录</h2>
    <PointTransactionList />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { NButton, NDivider,useMessage } from 'naive-ui'
import PointTransactionList from '@/components/user/userDashboard/PointTransactionList.vue'
import apiClient from '@/api/axios'

export default defineComponent({
  components: {
    NButton,
    NDivider,
    PointTransactionList
  },
  setup() {

    const message = useMessage()
    const pointBalance = ref(0)

    const fetchPointsData = async () => {

      /**
       * 拉取用户积分余额
       */
      const response = await apiClient.get("/point/get/my");
      pointBalance.value = parseInt(response.data.data.pointBalance)
      message.success("获取用户积分数据成功")

    }

    const pointStyle = computed(() => ({
      fontSize: '24px',
      fontWeight: 'bold',
      color: pointBalance.value > 50 ? 'green' : 'red'
    }))

    // 初始化时加载数据
    fetchPointsData()

    return {
      pointBalance,
      pointStyle,
      fetchPointsData
    }
  }
})
</script>

<style scoped>
.points-balance {
  padding: 20px;
}

.balance-header {
  display: flex;
  align-items: center;
}
</style>
